<template>
  <div>
    <el-form ref="form" class="info-form" :model="user" :rules="rules" label-width="80px">
      <el-form-item label="用户昵称" prop="nickName">
        <el-input v-model="user.nickName" maxlength="30" />
      </el-form-item>
      <el-form-item label="手机号码" prop="phoneNumber">
        <el-input
          v-model="user.phoneNumber"
          maxlength="11"
          :disabled="user.phoneNumber != null || user.phoneNumber != ''" />
        <el-button type="info" plain size="mini" class="change-btn" @click="verify('phone')">{{
          user.phoneNumber == null || user.phoneNumber == "" ? "绑定手机" : "更换手机"
        }}</el-button>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="user.email" maxlength="11" :disabled="user.email != null || user.email != ''" />
        <el-button type="info" plain size="mini" class="change-btn" @click="verify('email')">{{
          user.email == null || user.email == "" ? "绑定邮箱" : "更换邮箱"
        }}</el-button>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="user.sex">
          <el-radio label="0">男</el-radio>
          <el-radio label="1">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="submit">保存</el-button>
        <el-button type="danger" size="mini" @click="close">关闭</el-button>
      </el-form-item>
    </el-form>
    <Verify ref="verify" :user="user" @update="update"></Verify>
    <UpdateInfo ref="updateInfo" @updateInfo="updateInfo"></UpdateInfo>
  </div>
</template>

<script>
import { updateUserProfile } from "@/api/system/user"
import Verify from "./components/Verify.vue"
import UpdateInfo from "./components/UpdateInfo.vue"

export default {
  props: {
    user: {
      type: Object,
    },
  },
  components: {
    Verify,
    UpdateInfo,
  },
  filters: {
    phoneFilter(val) {
      let reg = /^(.{3}).*(.{4})$/
      return val.replace(reg, "$1****$2")
    },
  },
  data() {
    return {
      // 表单校验
      rules: {
        nickName: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
        email: [
          { required: true, message: "邮箱地址不能为空", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
        phoneNumber: [
          { required: true, message: "手机号码不能为空", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
      },
    }
  },
  methods: {
    // 表单重置
    reset() {
      this.passError = false
      this.codeError = false
      this.resetForm("changeForm")
    },
    submit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          updateUserProfile(this.user).then((response) => {
            this.$modal.msgSuccess("修改成功")
          })
        }
      })
    },
    //更新信息
    updateInfo(key, value) {
      this.user[key] = value
    },
    close() {
      this.$tab.closePage()
    },
    verify(type) {
      if ((type == "phone" && this.user.phoneNumber == "") || (type == "email" && this.user.email == "")) {
        this.bind(type)
      } else {
        this.$refs.verify.doVerify(type)
      }
    },
    bind(type) {
      this.$refs.updateInfo.bind(type)
    },
    update(type) {
      this.$refs.updateInfo.doUpdate(type)
    },
  },
}
</script>

<style lang="scss" scoped>
.info-form {
  .el-input--medium {
    width: 25%;
  }
  .change-btn {
    margin-left: 10px;
  }
}

.dialog-title {
  color: #40485b;
  width: 100%;
  border-bottom: 1px solid #eee;
  position: absolute;
  left: 0;
  top: 0;
  padding: 15px;
  font-size: 1.143rem;
  font-weight: bold;
}

.change-form {
  .form-item-label {
    color: rgba(0, 0, 0, 0.8);
    font-size: 1em;
    font-weight: bold;
  }
  .red-color {
    color: #d95c5c;
  }
}

.send-btn {
  color: #fe7300 !important;
}
.mobile {
  color: #333;
}
</style>
